<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
        #div1{width: 200px;height: 200px;background:red;filter:alpha{opacity:30};opacity:0.3;}
	</style>
</head>
<script type="text/javascript">
window.onload=function(){
	var oDiv=document.getElementById('div1');
	oDiv.onmouseover=function(){
		startMove(100);
	}
	oDiv.onmouseout=function(){
		startMove(30);
	}
}
	var timer=null;
	var alpha=30;
	function startMove(iTarget){
		var oDiv=document.getElementById('div1');
		clearInterval(timer);
		timer=setInterval(function(){
			var speed=0;
			if(alpha<iTarget){
				speed=1;
			}else{
				speed=-1;
			}
            if(alpha==iTarget){
                clearInterval(timer);
            }else{
            	alpha+=speed;
            	oDiv.style.filter="alpha(opacity:'+alpha+')";
            	oDiv.style.opacity=alpha/100;
            }
		},30);
	}
</script>
<body>
	<div id="div1"></div>
</body>
</html>